<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Images and other unusual elements: filters</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
      * {
        box-sizing: border-box;
      }
      p {
        margin: 1em 2em;
        padding: 20px;
        width: 100px;
        display: inline-block;
      }     
    </style>

    <style class="editable">
      p {
        border: 5px dashed red;
      }
      .filter {
        filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
      }

      .box-shadow {
        box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <p class="filter">Filter</p>
      <p class="box-shadow">Box shadow</p>
    </section>

    <textarea class="playable playable-css" style="height: 220px;">
p {
  border: 5px dashed red;
}
.filter {
  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
}

.box-shadow {
  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
}
    </textarea>

    <textarea class="playable playable-html" style="height: 120px;">
<p class="filter">Filter</p>
<p class="box-shadow">Box shadow</p>
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>
